<template>
  <header class="header">
    <h1>todos</h1>
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      :checked="isShow"
      @click="isShowFn"
    >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="value"
      @keydown.enter="addTaskFn"
    />
  </header>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
  data() {
    return {
      value: ''
    }
  },
  computed: {
    ...mapGetters(['isShow'])
  },
  methods: {
    ...mapMutations(['tasklist/addTask','tasklist/setIsShow']),
    addTaskFn() {
      this['tasklist/addTask'](this.value)
      this.value = ''
    },
    isShowFn() {
      this['tasklist/setIsShow']()
    }
  }
}
</script>
